body .num-anim {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 5.5rem;
    width: 3.8rem;
    font-size: 3rem;
}

body .num-anim .top-half-num,
body .num-anim .bottom-half-num {
    background-image: url();
    background-image: -webkit-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: -moz-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: -o-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: linear-gradient(180deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    text-align: center;
    overflow: hidden;
    padding-top: 0px;
}

body .num-anim .top-half-num {
    height: 50%;
}

body .num-anim .bottom-half-num {
    margin-top: 0px;
    height: 50%;
    margin-top: 3rem;
    background-color: #0074c2;
    background-image: none;
}

body .num-anim .bottom-half-num .dropper {
    margin-top: -3rem;
}

body .num-anim.bottom-anim {
    left: 0px;
    top: 5px;
    -webkit-transform: perspective(3.6rem) rotateX(90deg) rotateY(0deg);;
    -moz-transform: perspective(3.6rem) rotateX(90deg) rotateY(0deg);;
    -o-transform: perspective(3.6rem) rotateX(90deg) rotateY(0deg);;
    -ms-transform: perspective(3.6rem) rotateX(90deg) rotateY(0deg);;
    transform: perspective(3.6rem) rotateX(90deg) rotateY(0deg);;
}

body .num-anim.bottom-anim.down {
    -webkit-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);
    -moz-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);
    -o-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);
    -ms-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);
    transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-transition-delay: 0.25s;
    -moz-transition-delay: 0.25s;
    -o-transition-delay: 0.25s;
    transition-delay: 0.25s;
}

body .num-anim.top-anim {
    -webkit-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);;
    -moz-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);;
    -o-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);;
    -ms-transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);;
    transform: perspective(3.6rem) rotateX(0deg) rotateY(0deg);;
}

body .num-anim.top-anim.up {
    -webkit-transform: perspective(3.6rem) rotateX(-90deg) rotateY(0deg);
    -moz-transform: perspective(3.6rem) rotateX(-90deg) rotateY(0deg);
    -o-transform: perspective(3.6rem) rotateX(-90deg) rotateY(0deg);
    -ms-transform: perspective(3.6rem) rotateX(-90deg) rotateY(0deg);
    transform: perspective(3.6rem) rotateX(-90deg) rotateY(0deg);
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;

}

body canvas {
    height: 100%;
    width: 100%;
    background-color: transparent;
}

body .clock {

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #fff;
}

body .clock .time-container {

    overflow: hidden;
    -webkit-border-radius: 10px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 10px;
    -moz-background-clip: padding;
    border-radius: 10px;
    background-clip: padding-box;
    /* background: rgba(24, 24, 40, 0.5);
    -webkit-box-shadow: 0 2px 0px rgba(255, 255, 255, .25), inset 0 2px 0px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 2px 0px rgba(255, 255, 255, .25), inset 0 2px 0px rgba(0, 0, 0, .25);
    box-shadow: 0 2px 0px rgba(255, 255, 255, .25), inset 0 2px 0px rgba(0, 0, 0, .25); */
}

body .clock .time-container .num {
    position: absolute;
    top: 0px;
    left: 00px;
    display: inline-block;
    z-index: 1;
    height: 52%;
    overflow: hidden;
    width: 100%;
    -webkit-box-shadow: 0 2px 0px rgba(0, 114, 192, .25), inset 0 2px 0px rgba(255, 255, 255, .25);
    -moz-box-shadow: 0 2px 0px rgba(0, 114, 192, .25), inset 0 2px 0px rgba(255, 255, 255, .25);
    box-shadow: 0 2px 0px rgba(0, 114, 192, .25), inset 0 2px 0px rgba(255, 255, 255, .25);
    font-size: 4rem;
}

body .clock .time-container .num.bottom {
    top: 52%;
}

body .clock .time-container .num.bottom .bottom-container {
    margin-top: -76%;
}

body .clock .time-container .fade {
    position: absolute;
    top: -105px;
    left: -41px;
    width: 100%;
    height: 200%;
    background-color: transparent;
    background-image: url();
    background-image: -webkit-linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5));
    background-image: -moz-linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5));
    background-image: -o-linear-gradient(90deg, transparent 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5));
    background-image: linear-gradient(0deg, transparent 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5));
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
}

body .clock .time-container .digit {
    position: relative;
    float: left;
    width: 3.8rem;
    height: 5.5rem;
    /* margin: 11px 0 0 15px; */
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
    text-align: center;
    text-shadow: #ffffff 0px -3px 0px, #000000 0px 3px 0px;
    background-color: #353a48;
    /* -webkit-box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 3px rgba(0, 0, 0, 1), -2px -2px 3px rgba(0, 0, 0, 1), 2px -2px 3px rgba(0, 0, 0, 1), -2px 2px 3px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 3px rgba(0, 0, 0, 1), -2px -2px 3px rgba(0, 0, 0, 1), 2px -2px 3px rgba(0, 0, 0, 1), -2px 2px 3px rgba(0, 0, 0, 1);
    box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 3px rgba(0, 0, 0, 1), -2px -2px 3px rgba(0, 0, 0, 1), 2px -2px 3px rgba(0, 0, 0, 1), -2px 2px 3px rgba(0, 0, 0, 1); */
    background-image: url();
    background-image: -webkit-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: -moz-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: -o-linear-gradient(-90deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    background-image: linear-gradient(180deg, rgba(0, 114, 192, 1), rgba(0, 114, 192, 1) 100%);
    overflow: hidden;
}

body .clock .time-container .digit::after {
    content: " ";
    border: 2px solid rgba(0, 0, 0, 0.15);
    width: 3.6rem;
    margin-top: 3px;
    height: 121px;
    -webkit-border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
    display: inline-block;
}

body .clock .time-container .digit .ring {
    position: absolute;
    top: 2.4rem;
    left: 5px;
    height: 20px;
    width: 7px;
    background-color: #aaa;
    /*-webkit-box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 1px rgba(0, 0, 0, .5), -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5);*/
    /*-moz-box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 1px rgba(0, 0, 0, .5), -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5);*/
    /*box-shadow: 0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 1px rgba(0, 0, 0, .5), -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5);*/
    /*background-image: url();*/
    /*background-image: -webkit-linear-gradient(-90deg, rgba(205, 205, 205, 1), rgba(46, 50, 62, 1) 100%);*/
    /*background-image: -moz-linear-gradient(-90deg, rgba(205, 205, 205, 1), rgba(46, 50, 62, 1) 100%);*/
    /*background-image: -o-linear-gradient(-90deg, rgba(205, 205, 205, 1), rgba(46, 50, 62, 1) 100%);*/
    /*background-image: linear-gradient(180deg, rgba(205, 205, 205, 1), rgba(46, 50, 62, 1) 100%);*/
    z-index: 3;
    -webkit-border-radius: 8px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 8px;
    -moz-background-clip: padding;
    border-radius: 8px;
    background-clip: padding-box;
}

body .clock .time-container .digit .ring.ring-right {
    right: 5px;
    left: auto;
}

.swapper {
    position: relative;
    z-index: 2;
}